<!--
  - Copyright (c) 2021.  北京维数科技有限公司
  - Date :  2021/3/25
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.0.0
  -->

<template>
  <el-dialog
    title=""
    :visible.sync="Show"
    :fullscreen='true'
    :show-close='false'
    append-to-body
    custom-class="fulldialog outer-route-dialog"
    :close-on-press-escape='false'>
    <div class="dialog-header-wrap line-with-verticl">
      <div class="line-with-verticl"></div>
      <div class="dialog-header-handle">
        <div class="plantitle">{{routeStName}}</div>
        <div class="handle-tools">
          <div class="dialog-handle-items" @click="closeDialog"><i class="el-icon-close"></i></div>
        </div>
      </div>
    </div>
    <el-container>
      <el-header style="height: 0"></el-header>
      <el-main>
        <el-container>
          <el-aside width="250px" class="right-pannel_withline">
            <div class="pickup-wrap">
              <div class="pickup-title"><i class="el-icon-caret-right"></i>室外巡检路线</div>
              <el-scrollbar style="height:72vh">
                <ul class="pickup-list">
                  <li class="pickup-list-items" v-loading="leftListLoading" v-for="(item,index) in routelist" :key="item.id" v-if="routelist.length>0">
                    <div class="pickup-index"><span class="pickup-index-icon">{{index+1}}</span><span :title="item.label+'('+item.description+')'">{{item.label}}({{item.description}})</span></div>
                    <div class="pickup-del" @click="deleteRoute(item,index)"><i class="el-icon-delete"></i></div>
                  </li>
                  <li v-if="routelist.length<1"><p>暂无路线</p></li>
                </ul>
              </el-scrollbar>
              <div class="route-name-wrap">
                <p style="font-size: 14px;color: rgba(255,255,255,.7)"><i style="color:#f56c6c;padding-right: 5px">*</i>巡检路线名称</p>
                <el-row class="route-name-input"><el-input v-model.trim="editRouteName" placeholder="请输入路线名" :maxlength="30"></el-input></el-row>
                <el-row class="route-name-btns">
                  <el-button size="mini" type="primary" @click="updateRoute">保存</el-button>
                  <el-button type="text" @click="cancelUpdate">取消</el-button>
                </el-row>
              </div>
            </div>
          </el-aside>
            <el-container>
              <el-amap vid="outeramap" ref="map" resizeEnable='true' :plugin="plugin" :amap-manager="amapManager" :center="center" :zooms="zooms" :zoom="zoom" :events="events" class="mapset">
                <el-amap-marker v-for="(marker, index) in markers" :key="index" :position="marker.position" :vid="index" :id="marker.id">
                  <div class="hymap-marker-wrap">
                    <div class="hymain-map-marker" :class="{'hymain-map-marker__abnormal': marker.status==='0', 'hymain-map-marker__normal': marker.status==='2'}"
                         @click="addToroutelist(marker)">
                      <icon-svg icon-class="xiaofangshuan" style="fill:#ffffff" />
                    </div>
                  </div>
                </el-amap-marker>
              </el-amap>
            </el-container>
          <!--未标记设备-->
          <div class="top-unabled-device" v-if="unableCount>0">
            <i class="icon-jinggao"><icon-svg icon-class="jinggao" style="fill: #f5a623" /> </i>{{unableCount}}个设施未标记
          </div>
        </el-container>
      </el-main>
    </el-container>
  </el-dialog>
</template>

<script>
  import {
    outerdoorList,
    outerMakerList,
    outerHandleUpdate,
    outerUnmarker
  } from "@/api/device/inspectManager/index";

  import { AMapManager } from "vue-amap";
  let amapManager = new AMapManager();

    export default {
        name: "outerHandle",
        props:{
          Show: {
            required: true,
            default: false
          },
          id: {
            type: String,
            default: ""
          },
          routeStName: {
            type: String,
            default: ""
          },
          routeName: {
            type: String,
            default: ""
          },
        },
      data(){
          return {
            leftListLoading:false,
            unableCount:0,
            amapManager,
            center: [114.42377,30.50469],
            zooms:[5,19],
            zoom: 12,
            resized: true,
            markers: [],
            events: {
              init: o => {
                o.setMapStyle('amap://styles/117f36d1e643cfd46d21660d866df29e');
                setTimeout(()=>{
                  AMapUI.loadUI(["control/BasicControl"], function(BasicControl) {
                    //缩放控件
                    o.addControl(
                      new BasicControl.Zoom({
                        position: "rb" //右下角缩放
                      })
                    );
                  });
                },2000);
              }
            },
            plugin: [
              {
                pName: "CitySearch",
                // showMarker:false,
                events: {
                  init(o) {
                    o.getLocalCity(function (status, result) {
                      if (status === 'complete' && result.info === 'OK') {
                        if (result && result.city && result.bounds) {
                          var citybounds = result.bounds;
                          let map = amapManager.getMap();

                          map.setBounds(citybounds);
                          map.setZoom(12.2)

                        }
                      }
                    })
                  }
                }
              },
              {
                pName: "Scale",
                events: {}
              }
            ],
            routelist:[],
            editRouteName:''
          }
      },
      methods:{
        init(){
          this.editRouteName = JSON.parse(JSON.stringify(this.routeName));
          this.getRouteMarkers();
          this.getUnmarkerCount();
          //获取路线列表
          this.getrouteList();
        },
        closeDialog(){
          //当面板关闭(点击关闭按钮)
          this.$emit("update:Show", false);
          this.$emit("updateList");
        },
        getUnmarkerCount(){
          outerUnmarker().then(res=>{
            if (res.status===200){
              this.unableCount = res.data.count;
            }
          })
        },
        getrouteList(){
          outerdoorList({id:this.id}).then(res=>{
            let routes = res.data;
            if (routes.length>0){
              let temparr = [];
              routes.forEach((item)=>{
                temparr.push({
                  position: [Number(item.positionSign.split(",")[0]), Number(item.positionSign.split(",")[1])],
                  id: item.id,
                  label: item.equipmentType,
                  description: item.positionDescription,
                  status:'2'
                })
              });
              this.routelist = temparr;
            }
          })
        },
        getRouteMarkers() {
          //初始化查询当前地图下设备标记
          outerMakerList().then(res => {

            this.markers = res.data;
            if (this.markers.length>0){
              let markers = [];
              for (let i = 0; i < this.markers.length; i++) {
                markers.push({
                  position: [Number(this.markers[i].positionSign.split(",")[0]), Number(this.markers[i].positionSign.split(",")[1])],
                  id: this.markers[i].id,
                  label: this.markers[i].equipmentType,
                  description: this.markers[i].positionDescription,
                  status:'2'
                });
              }
              this.markers = [];
              this.markers = markers;
            }
          });
        },
        addToroutelist(marker){
          if (marker.status==='0'){
            return false;
          } else {
            marker.status = '0';
          // 添加到右侧列表
            this.routelist.push(marker);
          }
        },
        updateRoute(){
          let originList = this.routelist;
          let templist = [];
          originList.forEach(item=>{
            templist.push(item.id)
          });
          let ids = templist.toString();
          //更新路线名
          outerHandleUpdate({id:this.id,ids:ids,routeName:this.editRouteName}).then(res=>{
            if (res.status===200){
              this.$emit("update:Show", false);
              this.$emit("updateList");
            }
          })
        },
        cancelUpdate(){
          this.$emit("update:Show", false);
          this.$emit("updateList");
        },
        deleteRoute(self,index){
          self.status = '2';
          // 添加到markers
          this.markers.push(self);
          this.routelist.splice(index,1);

        }
      },
      watch: {
        Show(v) {
          if (v) {
            let self = this;
            this.$nextTick(() => {
              self.init();
            });
          } else {
              this.routelist = [];
              this.markers = [];
          }
        }
      }
    }
</script>

<style rel="stylesheet/scss" lang="scss">
  .top-unabled-device{
    background: #fff6e7;
    border:1px solid #f5a623;
    color: #f5a623;
    font-size: 14px;
    font-family: PingFangHK-Regular;
    border-radius: 2px;
    box-sizing: border-box;
    padding: 5px 20px;
    margin-top: 40px;
    position: absolute;
    z-index: 99;
    left: 50%;
    margin-left: -80px;
    line-height: 22px;
    .icon-jinggao{
      font-size: 22px;
      margin-right: 10px;
      vertical-align: text-bottom;
    }
  }
  .fulldialog{
    &.outer-route-dialog{
      &:before{
        border: 0;
      }
      .mapset {
        height: 100%;
        width: 100%;
        .amap-logo {
          display: none !important;
        }
        .amap-copyright {
          visibility: hidden !important;
        }
        .amap-ui-control-position-rb{
          background: #fff;
        }
        .hymap-marker-wrap {
          .hymain-map-marker {
            display: inline-block;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            border:2px solid #fff;
            position: relative;
            text-align: center;
            vertical-align: middle;
            .svg-icon{
              position: relative;
              top: 2px;
            }
            &.hymain-map-marker__normal {
              background: #50E3C2;
            }
            &.hymain-map-marker__abnormal {
              background: #dfdfdf;
            }
          }
        }
      }
      .right-pannel_withline{
        ul {
          list-style: none;
          margin: 0;
          padding: 0;
          li {
            margin-left: 0;
          }
        }
        border-left: 1px solid transparent;
        padding-bottom: 20px;
        height: calc(100vh - 60px);
      }
      .pickup-wrap{
        height: 100%;
        .pickup-title{
          font-size: 18px;
          color: #50E3C2;
          font-weight: bold;
          line-height: 36px;
          i{
            opacity: 0.5;
          }
        }
        .pickup-list{
          padding: 20px;
          position: relative;
          &::before{
            content: '';
            position: absolute;
            border-left: 1px solid rgba(80, 227, 194,.3);
            height: calc(100% - 80px);
            left: 27px;
            top: 40px;
          }
          .pickup-list-items{
            display: flex;
            justify-content: space-between;
            line-height: 40px;
            cursor: pointer;
            position: relative;
            .pickup-del{
              opacity: 0;
              color: #dfdfdf;
              font-size: 12px;
            }
            &:hover{
              .pickup-del{
                opacity: 1;
                transition: all .3s;
              }
            }
          }
          .pickup-index-icon{
            background:rgba(80, 227, 194,.6);
            color: #fff;
            display: inline-block;
            width: 14px;
            height: 14px;
            font-weight: normal;
            line-height: 14px;
            text-align: center;
            border-radius: 2px;
            margin-right: 15px;
          }
          .pickup-index{
            font-size: 12px;
            color:#50E3C2;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
        .route-name-wrap{
          padding-top: 20px;
          .route-name-input{
            margin: 0 10px;
          }
        }
      }
      .el-scrollbar__wrap {
        overflow-x: hidden;
      }
      .custom-dialog-btn {
        position: absolute;
        font-size: 30px;
        left: 24px;
        top: 14px;
        color: #fff;
        &:hover {
          cursor: pointer;
        }
      }
      .el-header {
        padding: 0;
      }
      .el-dialog__header {
        display: none;
      }
      .el-dialog__body {
        padding: 0;
        height: 100vh;
        width: 100%;
        overflow: hidden;
        .is-vertical {
          height: 100%;
        }
      }
      .plantitle {
        text-align: center;
        font-size: 20px;
      }
    }
  }
</style>
